<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数据更新的变异方法</title>
<!--引入Vue库-->
<script src="vue.js"></script>
</head>
<body>	
<div id="app">
  <div>
    <button @click="push">push</button>
    <button @click="pop">pop</button>
    <button @click="shift">shift</button>
    <button @click="unshift">unshift</button>
    <button @click="splice">splice</button>
    <button @click="sort">sort</button>
    <button @click="reverse">reverse</button>
  </div>
  <ul>
    <li v-for="item in items" >
      {{ item.message }}
    </li>
  </ul>  
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'one' },
      { message: 'two' },
      { message: 'four' }
    ],
    addValue:{message:'six'}
  },
  methods:{
    push(){
      this.items.push(this.addValue)
    },
    pop(){
      this.items.pop()
    },
    shift(){
      this.items.shift()
    },
    unshift(){
      this.items.unshift(this.addValue)
    },
    splice(){
      this.items.splice(0,1)
    },
    sort(){
     this.items.sort()
    },
    reverse(){
      this.items.reverse()
    },
  }
})
</script>
</body>
</html>
